<div class="auth-main">
  <div class="auth-block">
    <h1>聆客会议管理系统</h1>
    <a routerLink="/login" class="auth-link">已经有账号了? 去登录!</a>

    <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="form-horizontal my-validate-form">
      <div class="form-group row" [ngClass]="{'has-error': (!name.valid && name.touched), 'has-success': (name.valid && name.touched)}">
        <label for="inputName3" class="col-sm-2 control-label">姓名</label>

        <div class="col-sm-10">
          <input [formControl]="name" type="text" class="form-control" id="inputName3" placeholder="姓名">
        </div>
      </div>
      <div class="form-group row" [ngClass]="{'has-error': (!email.valid && email.touched), 'has-success': (email.valid && email.touched)}">
        <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

        <div class="col-sm-10">
          <input [formControl]="email" type="email" class="form-control" id="inputEmail3" placeholder="邮箱">
        </div>
      </div>
      <div class="form-group row" [ngClass]="{'has-error': (!phone.valid && phone.touched), 'has-success': (phone.valid && phone.touched)}">
        <label for="inputPhone3" class="col-sm-2 control-label">手机</label>

        <div class="col-sm-10">
          <input [formControl]="phone" type="phone" class="form-control" id="inputPhone3" placeholder="手机">
        </div>
      </div>
      <div class="form-group row" [ngClass]="{'has-error': (!password.valid && password.touched), 'has-success': (password.valid && password.touched)}">
        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

        <div class="col-sm-10">
          <input [formControl]="password" type="password" class="form-control" id="inputPassword3" placeholder="密码">
        </div>
      </div>
      <div class="form-group row" [ngClass]="{'has-error': (!repeatPassword.valid && repeatPassword.touched), 'has-success': (repeatPassword.valid && repeatPassword.touched)}">
        <label for="inputPassword4" class="col-sm-2 control-label">重复密码</label>

        <div class="col-sm-10">
          <input [formControl]="repeatPassword" type="password" class="form-control" id="inputPassword4" placeholder="重复密码">
          <span *ngIf="!passwords.valid && (password.touched || repeatPassword.touched)" class="help-block sub-little-text">两次密码不一致</span>
        </div>
      </div>
      <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
          <button [disabled]="!form.valid" type="submit" class="btn btn-primary btn-auth">注册</button>
        </div>
      </div>

      <div class="form-group row">
        <div class="offset-sm-2 col-sm-10">
          <div class="validate-errors">
            <div class="validate-error" *ngIf="errors">
              <div>{{ errors }}</div>
            </div>
          </div>
        </div>
      </div>

    </form>

    <!--<div class="auth-sep"><span><span>or Sign up with one click</span></span></div>

    <div class="al-share-auth">
      <ul class="al-share clearfix">
        <li><i class="socicon socicon-facebook" title="Share on Facebook"></i></li>
        <li><i class="socicon socicon-twitter" title="Share on Twitter"></i></li>
        <li><i class="socicon socicon-google" title="Share on Google Plus"></i></li>
      </ul>
    </div>-->

  </div>
</div>
